<template>
  <div class="online">
    <h4 style="margin: 10px 10px">自助服务</h4>
    <van-grid>
      <van-grid-item @click="goOnline" icon="manager-o" text="人工客服" />
    </van-grid>
    <h4 style="margin: 10px 10px">猜你想问</h4>
    <van-collapse v-model="activeNames" accordion>
      <van-collapse-item title="如何找回密码？" name="1">
        您好，1：如果您有绑定手机和邮箱，请在登录页面右下方，点击“忘记密码”通过绑定的手机和
        邮箱来找回密码。2：如果您绑定的手机和邮箱已失效，请打电话联系客服找回密码。
      </van-collapse-item>
      <van-collapse-item title="如何实名认证？" name="2">
        在设置-安全隐私-实名认证页面，选择对应的证件类型，按照要求填写信息来进行实名认证。
      </van-collapse-item>
      <van-collapse-item title="如何开通会员" name="3">
        在我的页面点击开通会员，跳转到支付页面，您可以选择微信付款或支付宝付款
      </van-collapse-item>
      <van-collapse-item title="手机号已被绑定/被他人注册了怎么办？" name="4">
        您好，如果发现自己的手机号已被注册或绑定了账号，请第一时间联系客服确认处理，感谢您的支持。
      </van-collapse-item>
    </van-collapse>
    <div class="foot">
      <p>vip问题热线：1587864546587</p>
      <p>vip问题热线：1587864546587</p>
      <p>热线受理时间：不受理</p>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: "online",
  data() {
    return {
      activeNames: []
    }
  },
  methods: {
    goOnline() {
      Toast('人工服务尚未开通，请期待')
    }
  },
  mounted() {
    this.$emit('title', '在线客服')
  }
}
</script>

<style scoped>
.online {
  width: 100%;
  height: 100%;
}
.foot {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
.foot>p {
  font-size: 12px;
  margin: 7px 0;
}
.foot>p:last-child {
  font-size: 10px;
  color: gray;
}
</style>
